{% extends 'base.html' %}
{% block title %}发布博客{% endblock %}
{% block head %}
    <script src="{% static 'js/wangEditorIndex.js' %}"></script>
    <script src="{% static 'js/index.js' %}"></script>
    <script src="{% static 'js/jquery-3.7.1.min.js' %}"></script>

    <link
            href="{% static 'css/wangEditorStyle.css' %}"
            rel="stylesheet"
    />
    <style>
        #editor—wrapper {
            border: 1px solid #ccc;
            z-index: 100; /* 按需定义 */
        }

        #toolbar-container {
            border-bottom: 1px solid #ccc;
        }

        #editor-container {
            height: 500px;
        }
    </style>
{% endblock %}

{% block main %}

    <main class="container rounded bg-white p-3">
        <h3>发布博客</h3>
        <form method="post" action="">
            {% csrf_token %}
            </div>
            <div class="mb-3">
                <label for="exampleFormControlInput1" class="form-label">标题</label>
                <input type="text" class="form-control" id="exampleFormControlInput1" placeholder="请输入标题">
            </div>
            <div class="mb-3">
                <label for="exampleFormControlTextarea1" class="form-label">分类</label>
                <select class="form-select" aria-label="Default select example" id="category-select">
                    <option selected>请选择分类</option>
                    {% for category in categories %}

                        <option value="{{ category.id }}">{{ category.name }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="mt-2">
                <label for="exampleFormControlTextarea1" class="form-label">正文</label>
                <div id="editor—wrapper">
                    <div id="toolbar-container"><!-- 工具栏 --></div>
                    <div id="editor-container"><!-- 编辑器 --></div>
                </div>
            </div>
            <div class="mt-2 d-flex justify-content-end">
                <button type="button" class="btn btn-primary" id="submit-btn">发布</button>
            </div>
        </form>
    </main>
{% endblock %}